<template>
  <div>
    <div class="header">
      <div class="presion">
        <img src="../assets/presion.png" alt />
      </div>
      <div class="pre">
        <div class="zheng">
          <p>{{  $store.state.location }}</p>
        </div>
        <div class="ring" @click="toAddress">
          <img src="../assets/城市切换按钮1@2x.png" alt />
        </div>
      </div>
    </div>

    <div>
      <li>
        <div class="left">
          <!-- <span>所在地区</span> -->
        </div>
        <div class="right r">
          <!-- <div class="city" @click="toAddress">{{ city }}</div> -->
          <i class="arrow-r"> </i>
        </div>
      </li>
      <v-distpicker
        type="mobile"
        @selected="selected"
        v-show="addInp"
        class="area1"
      >
      </v-distpicker>
      <div class="mask" v-show="mask"></div>
    </div>
  </div>
</template>

<script>
import getCurrentCityName from "../../getUserLocation";

import VDistpicker from "v-distpicker";
export default {
  name: "",
  data() {
    return {
      cityName: "",
      city: "郑州市",
      addInp: false,
      mask: false,
    };
  },
  components: {
    VDistpicker,
  },

 
  methods: {
    // getCurrentCity(){
    //   getCurrentCityName().then((city)=>{
    //     this.cityName=city
    //     console.log(city)
    //   })
    // }

    toAddress() {
      this.mask = true;
      this.addInp = true;
    },
    // 省市区三级联动
    selected(data) {
      this.mask = false;
      this.addInp = false;
      // this.city =
      //   data.province.value + " " + data.city.value + " " + data.area.value;
      // this.$store.state.location = data.city.value;
      this.$store.commit("setlocation",data.city.value)

      // window.$area=data.city.value
      // this.$forceUpdate()

      
    },
  },
  // computed:{
  //   location(){
  //     console.log(window.$area)
  //     return window.$area
  //   }
  // },
  mounted() {
    // this.getCurrentCity();
  },
};
</script>
<style scoped lang="less">
.header {
  position: relative;
  width: 100vw;
  height: 12vw;
  // border: 1px solid red;
  background: #ffffff;
  // box-shadow: 1vw 1vw 0.1vw;
  position: absolute;
  top: 0;
  float: left;
  box-shadow: 0 0.04vw;

  .presion {
    position: absolute;
    display: inline-block;
    width: 12vw;
    height: 7vw;
    // border: 1px solid blue;

    img {
      display: block;
      margin: 0 auto;
      width: 5vw;
      margin-top: 3vw;
    }
  }
  .pre {
    position: absolute;
    width: 20vw;
    height: 16vw;

    display: inline-block;

    margin-left: 67vw;

    .zheng {
      position: absolute;
      width: 20vw;
      height: 7vw;
      // border: 1px solid blue;
      display: inline-block;
      p {
        font-size: 4.5vw;
        text-align: center;
        line-height: 12vw;
        color: #1a1a1a;
        margin-right: -11vw;
      }
    }

    .ring {
      position: absolute;
      width: 5vw;
      height: 5vw;
      // border: 1px solid yellow;
      display: inline-block;
      margin-left: 23vw;
      margin-top: 3vw;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 3vw;
      margin-top: 3.5vw;
    }
  }
}
li {
  list-style: none;
}
.area1 {
  width: 100vw;
  height: 100vh;
  /* position: fixed; */
  left: 0;
  bottom: 0;
  overflow-y: scroll;
  position: absolute;
  font-size: 4vw;
  background: #fff;
  z-index: 1000;
}
.distpicker-address-wrapper .address-header ul {
  /* position: fixed !important; */
  left: 0 !important;
  top: 0 !important;
}
</style>
